<template>
    <div class="navigation_box">
        <image :src="adForm.thumbnail" class="navigation_img"></image>
        <text class="navigation_title">{{content.title}}</text>
        <div class="navigation_more" @click="toLink(adForm)">
            <text class="navigation_more_title">{{content.subTitle}}</text>
            <image src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/jxd/%E5%90%91%E5%8F%B3.png" class="navigation_more_icon"></image>
        </div>
    </div>
</template>
<script>
import { list } from "@/api/ad";
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 1,
            adForm: {
                thumbnail: "http://cdn.rzico.com/img/banner_img.png",
            },
            tagIds: [],
        };
    },
    created() {
        this.loadAd();
    },
    props: ["content"],
    methods: {
        loadAd() {
            var _this = this;
            this.tagIds = this.content.tagids.split(",");
            for (var i = 0; i < this.tagIds.length; i++) {
                this.tagIds[i] = parseInt(this.tagIds[i]);
            }
            list({
                tagIds: this.tagIds,
                mchId: this.getGlobalData().mchId,
            })
                .then((response) => {
                    if (!_this.isNull(response.data.data)) {
                        if (_this.isNull(response.data.data[0].thumbnail)) {
                            response.data.data[0].thumbnail =
                                "http://cdnx.hulu.fj.cn/upload/20200629/rBD_P17oiuSAYl2RAAQj40EPdu8011.png";
                        } else {
                            response.data.data[0].thumbnail = _this.thumbnail(
                                response.data.data[0].thumbnail,
                                750,
                                124
                            );
                        }
                        this.adForm = response.data.data[0];
                    }
                })
                .catch((error) => {
                    console.log("error!!");
                });
        },
        toLink(e) {
            if (e.hasOwnProperty("typeId") && !this.isNull(e.typeId)) {
                if (e.type === 0) {
                    eeui.openPage({
                        statusBarType: "immersion",
                        statusBarStyle: false,
                        url: "root://pages/goods/product/details.js",
                        params: e.typeId,
                    });
                } else if (e.type === 9) {
                    eeui.openPage({
                        statusBarType: "immersion",
                        statusBarStyle: false,
                        url: "root://pages/index/wxPage/wxPage.js",
                        params: e.typeId,
                    });
                }
            }
        },
    },
};
</script>
<style scoped>
.navigation_box {
    width: 710px;
    height: 104px;
    background-color: tomato;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    margin-left: 20px;
    margin-top: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.navigation_img {
    width: 750px;
    height: 124px;
    position: absolute;
    top: -12px;
    left: -10px;
}
.navigation_title {
    font-size: 32px;
    font-weight: 700;
    color: white;
    width: 470px;
    lines:1;
    text-overflow: ellipsis;
}

.navigation_more {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.navigation_more_title {
    font-size: 36px;
    font-weight: 700;
    color: white;
}

.navigation_more_icon {
    width: 28px;
    height: 28px;
}
</style>
